<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }

      p {
        text-indent: 2em;
        font-size: 1em;
        text-align: justify;
        line-height: 1.8em;
        padding: 0 2em;
      }
      #flashlight {
        --xPos: 50vw;
        --yPos: 50vh;
      }
      #flashlight::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        pointer-events: none;
        background: radial-gradient(
          circle 9em at var(--xPos) var(--yPos),
          rgba(0, 0, 0, 0),
          rgba(0, 0, 0, 1)
        );
      }
    </style>
  </head>
  <body>
    <div id="flashlight"></div>
    <p>
      头上一片青天，心中一个信念。不是年少无知，只是不惧挑战。凡事求个明白，算是本性难改。可以还你公道，我又何乐不为。一些漫不经心的说话，将我疑惑解开。一种莫名其妙的冲动，叫我继续追寻。你的一举一动，我却倍加留心。只要真相大白，一切、一切无愧于心。一些漫不经心的说话，将我疑惑解开。一种莫名其妙的冲动，叫我继续追寻。你的一举一动，我却倍加留心。只要真相大白，一切、一切无愧于心。
    </p>
    <p>
      头上一片青天，心中一个信念。不是年少无知，只是不惧挑战。凡事求个明白，算是本性难改。可以还你公道，我又何乐不为。一些漫不经心的说话，将我疑惑解开。一种莫名其妙的冲动，叫我继续追寻。你的一举一动，我却倍加留心。只要真相大白，一切、一切无愧于心。一些漫不经心的说话，将我疑惑解开。一种莫名其妙的冲动，叫我继续追寻。你的一举一动，我却倍加留心。只要真相大白，一切、一切无愧于心。
    </p>

    <script>
      let mouseX = 0;
      let mouseY = 0;
      let flashlight = document.querySelector("#flashlight");

      const isTouchDevice = () => {
        try {
          document.createEvent("TouchEvent");
          return true;
        } catch (e) {
          return false;
        }
      };

      function getMousePosition(e) {
        mouseX = !isTouchDevice() ? e.pageX : e.touches[0].pageX;
        mouseY = !isTouchDevice() ? e.pageY : e.touches[0].pageY;

        flashlight.style.setProperty("--xPos", mouseX + "px");
        flashlight.style.setProperty("--yPos", mouseY + "px");
      }
      function leave() {
        flashlight.style.display = "none";

        document.removeEventListener("mousemove", getMousePosition);
        document.removeEventListener("touchmove", getMousePosition);
      }
      function enter() {
        flashlight.style.display = "block";
        document.addEventListener("mousemove", getMousePosition);
        document.addEventListener("touchmove", getMousePosition);
      }

      document.onmouseenter = document.ontouchstart = enter;
      document.onmouseleave =
        document.ontouchend =
        document.ontouchcancel =
          leave;
    </script>
  </body>
</html>
